<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function f1(){
            console.log(111)
        }

        // 页面加载完成之后执行
        window.onload = function(){
            var mybtn = document.getElementById('mybtn')
            // console.log(mybtn)

            // 为按钮2绑定点击事件
            mybtn.onclick = function(event){ // event表示事件对象
                console.log(222)
                console.log(event.target) // 事件源
                console.log(this) // this表示事件源
            }
        }

    </script>
</head>
<body>
    <!-- 静态绑定 -->
    <button onclick="f1()">按钮1</button>

    <!-- 动态绑定 -->
    <button id="mybtn">按钮2</button>


    <!-- <script>
        var mybtn = document.getElementById('mybtn')
        console.log(mybtn)
    </script> -->
</body>
</html>